<template>
    <div class="search_wrap">
        <Form name="customized_form_controls" layout="inline" :model="formState">
            <FormItem name="gameStatus" label="预测日期">
                <RangePicker v-model:value="dateValue" :format="dateFormat" :presets="rangePresets"
                    :get-popup-container="getPopupContainerSelect" @change="changeTime" />
            </FormItem>
            <FormItem name="gameName" label="pid">
                <Input v-model:value="formState.qid" autocomplete="off" :allowClear="true" @input="searchData"
                    @keyup.enter="searchData" placeholder="请输入订单id" />
            </FormItem>
            <FormItem name="gameName" label="最近30天付费金额区间">
                <Input v-model:value="formState.recharge_s" autocomplete="off" :allowClear="true" @input="searchData"
                    @keyup.enter="searchData" placeholder="" />~
                <Input v-model:value="formState.recharge_e" autocomplete="off" :allowClear="true" @input="searchData"
                    @keyup.enter="searchData" placeholder="" />
            </FormItem>
            <FormItem name="gameName" label="预测流失率阈值">
                <Input v-model:value="formState.churn_prob_s" autocomplete="off" :allowClear="true" @input="searchData"
                    @keyup.enter="searchData" />
            </FormItem>

            <FormItem name="gameType" label="游戏gkey">
                <Input v-model:value="formState.gkey" autocomplete="off" :allowClear="true" @input="searchData"
                    @keyup.enter="searchData" />
            </FormItem>
        </Form>
        <Button type="primary" @click="exportList">
            <Icon icon="uil:export" />导出
        </Button>

    </div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue';
import { Input, Form, FormItem, Select, SelectOption, RangePicker, Button } from 'ant-design-vue';
import { gameAdmin } from '@/store/modules/gameAdmin';
import dayjs from 'dayjs';
import { rangeDatepicker } from '@/utils';

import Icon from '@/components/Icon/Icon.vue';

const rangePresets = ref(rangeDatepicker);
const dateFormat = 'YYYY-MM-DD';
const _gameAdmin = gameAdmin();
// 顶部按钮悬浮窗	daohang_vippop
// 玩游戏按钮悬浮窗	playgame_vippop
// 个人主页悬浮窗	homepage_vippop
// 收银台	vip_cashier
const formState = reactive({
    qid: '',
    qid: '',
    user_name: '',
    prod_type: '-1',
    refund_status: '-1',
    status: '-1',
    pay_src: '',
    churn_prob_s: "",
    gkey: "",
});
const dateValue = ref('');
let dateParam = ref({
    day_s: '',
    day_e: '',
});
const exportList = () => {
    let _upParams = Object.assign(formState, dateParam.value);
    let paramsSearch = new URLSearchParams(_upParams).toString();
    window.open(
        'http://vip-api-admin.360game.qihoo.net/admin/order/getlist?export=1&' + paramsSearch,
    );
};
//搜索
const searchData = async () => {
    console.log(formState, dateValue.value);
    let _upParams = Object.assign(formState, dateParam.value);
    _gameAdmin.setPaySearchParams(_upParams);
};
const changeTime = (e, dataString) => {
    console.log(dataString);
    dateParam.value = {
        day_s: dataString[0],
        day_e: dataString[1],
    };
    searchData();
};
const autoRangeDate = () => {
    let preDay = dayjs().subtract(30, 'day').format(dateFormat);
    let nowDay = dayjs().subtract(0, 'day').format(dateFormat);
    dateValue.value = [dayjs(preDay, dateFormat), dayjs(nowDay, dateFormat)];
    console.log(dateValue.value, preDay, nowDay);
    dateParam.value = {
        day_s: preDay,
        day_e: nowDay,
    };
};
const getPopupContainerSelect = () => document.querySelector('.search_wrap');
onMounted(() => {
    autoRangeDate();
});
</script>
<style scoped>
.search_wrap {
    display: flex;
    justify-content: space-between;

    .ant-form-inline {
        gap: 20px;
    }

    .ant-form-item {
        margin-bottom: 5px;
    }
}
</style>